// pages/music.js
import {
  getBanner,
  getTopPlayList
} from '../../service/api'
import querySelector from '../../utils/querySelector'
import debounce from '../../utils/debounce'
import store from '../../store/index'
import {rankObj} from '../../store/index'
import audioCTX, {audioStore} from '../../store/audioctx'
const debounceQuerySelector = debounce(querySelector)
Page({
  /**
   * 页面的初始数据
   */
  data: {
    bannerList: [],
    musicInfo: {},
    status: false,
    imgHeight: 0,
    rankings: [], // 热门歌曲
    hotList: [], // 热门歌单
    chineseList: [], // 华语歌单
    allRankingObj: {0:{},2:{},3:{}}
  },
  handleSearchClick: function () {
    wx.navigateTo({
      url: '/pages/detail-search/detail-search',
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    getBanner().then(e => {
      const {
        banners
      } = e
      this.setData({
        bannerList: banners
      })
    })
    getTopPlayList().then(e => {
      const {playlists:hotList} = e
      console.log(hotList);
      this.setData({hotList})
    })
    getTopPlayList('华语').then(e => {
      const {playlists:chineseList} = e
      this.setData({chineseList})
    })
    store.dispatch('getRankings')
    store.onState('rankings', res => {
      if (!res.tracks) return
      this.setData({rankings: res.tracks.slice(0, 6)})
    })
    store.onState('newRankings', this.changeData(0))
    store.onState('originRankings', this.changeData(2))
    store.onState('upRankings', this.changeData(3))
    audioStore.onState('musicInfo', musicInfo => {
      this.setData({musicInfo})
    })
    audioStore.onState('status', status => {
      this.setData({status})
    })
  },
  changeData(index) {
    return (res) => {
      if (!res.tracks) return
      let originData = {...this.data.allRankingObj}
      let playCoung = res.playCount
      let name = res.name
      let picUrl = res.coverImgUrl
      let tracks = res.tracks.slice(0, 3)
      originData[index] = {playCoung, name,picUrl, tracks}
      this.setData({allRankingObj:originData})
    }
  },
  changeStatus() {
    if (!this.data.musicInfo.al) return
    audioStore.dispatch('changeAudioStatus', this.data.status)
  },
  imgLoad() {
    debounceQuerySelector('.image').then(e => {
      this.setData({imgHeight: e[0].height})
    })
  },
  needMoreRecommend() {
    // rankings ranks
    wx.navigateTo({
      url: `/pages/deatil-song/index?name=rankings&type=ranks`,
    })
  },
  needMoreRanks(e) {
    const {currentTarget: {dataset}} = e
    let name = rankObj[dataset.index]
    wx.navigateTo({
      url: `/pages/deatil-song/index?name=${name}&type=ranks`,
    })
  },
  goSongType() {
    wx.navigateTo({
      url: `/pages/song-type/index`,
    })
  },
  musicItemTap(e) {
    audioStore.setState('songsPlayList', this.data.rankings)
    audioStore.setState('currentPlayIndex',e.currentTarget.dataset.index)
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})